<template>
  <div class="view-wrapper">
    <div class="listBox">
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:member="{ scope }">
          <div class="slot_box">
            <img class="avatar_img" :src="scope.row.avatar" alt="" v-if="scope.row.avatar!=''" />
            <img class="avatar_img" src="../../../../../static/avant.png" v-if="scope.row.avatar==''" alt="" />
            <div>{{ scope.row.nickName }}</div>
          </div>
        </template>
        <template v-slot:validityTypeDict="{ scope }">
          <div v-if="scope.row.cardType == 9">{{scope.row.usableCount}}天</div>
          <div v-else-if="scope.row.validityType == 2 && scope.row.cardType == 8">{{scope.row.validityEndTime}}</div>
          <div v-else>{{scope.row.validityTypeDict}}</div>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row)">查看</el-button>
        </template>
      </ex-table>
    </div>
    <el-dialog
      title="卡使用记录"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div class="dia_box" v-loading="loading2">
        <div class="dia_head">
          <span>日期</span>
          <span>使用情况</span>
        </div>
        <div v-if="detailLs.length==0" style="text-align: center;padding-top:10px">暂无数据</div>
        <div class="dia_detail" v-for="(item,index) in detailLs" :key='index'>
          <div class="dia_detail_l">{{item.useTime}}</div>
          <div class="dia_detail_r">
            <span style="margin-right: 10px">{{item.typeDict}}</span>
            <span v-if="item.cardType==1||item.cardType==3">{{item.symbol}}{{item.changValue}}</span>
            <span v-if="item.cardType==2 || item.cardType==8 || item.cardType==5">{{item.symbol}}{{item.changValue}}次</span>
            <span v-if="item.cardType==4">{{item.symbol}}{{item.changValue}}课时</span>
            <span v-if="item.cardType==9">到店</span>

          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <!-- <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        > -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
// components
import { cardList4Customer, cardUseLs } from "@/api/merchants";
import ExportExcelButton from "@/components/ExportExcelButton/index";
import handlePageMixin from "@/mixins/handlePageMixin";
export default {
  name: "billList",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      id: "",
      dialogVisible: false,
      loading: false,
      loading2: false,
      formInline: {
        customerId: "", //客户id
        merchantId:'',//商户Id
        cardType: "", //卡类型  1股东 2计次 3 计费  4课时
      },
      date: [],
      options: [
        {
          value: "0",
          label: "请选择",
        },
        {
          value: "1",
          label: "商家名称1",
        },
        {
          value: "2",
          label: "商家名称2",
        },
      ],
      detailLs:[],
      symbol:'',//符号
      customerId: "",
      customerCardId: "",
      tableData: [],
      tableColumn: [
        {
          prop: "会员",
          slot: true,
          slotName: "member",
          label: "会员",
          width: "260",
        },
        { prop: "assetName", label: "卡名称", width: "160" },
        { prop: "cardTypeDict", label: "卡类型", width: "160" },
        { prop: "buyCardTime", label: "购卡时间", width: "160" },
        { prop: "buyMoney", label: "购卡金额", width: "160" },
        { prop: "giveMoney", label: "赠送金额", width: "160" },
        { prop: "buyCardCount", label: "卡次数", width: "160" },
        { prop: "buyCardCountClassHour", label: "卡课时", width: "160" },
        { label: "卡有效期", width: "160",slot: true,slotName: "validityTypeDict", },
        { prop: "buyCardResource", label: "购卡来源", width: "160" },
        { prop: "cardStartUseTime", label: "开卡时间", width: "160" },
        { prop: "holdDays", label: "持有天数", width: "160" },
        { prop: "balanceMoney", label: "剩余金额", width: "160" },
        { prop: "numberUsableCount", label: "剩余次数", width: "160" },
        { prop: "classUsableCount", label: "剩余课时", width: "160" },
        { prop: "validityEndTime", label: "有效期截止", width: "160" },
        {
          label: "使用记录",
          slot: true,
          slotName: "operate",
          width: "160",
          fixed: "right",
        },
      ],
    };
  },
  computed: {
    ExportParams() {
      const { id: ticketId } = this;
      const params = {
        ...this.pageOptions,
        ...this.formInline,
        startTime: this.date[0],
        endTime: this.date[1],
      };
      return params;
    },
  },
  mounted() {
    this.formInline.merchantId = this.$route.query.merchantId;
    this.formInline.customerId = this.$route.query.customerId;
    this.getList();
  },
  methods: {
    handleClose(done) {
      done();
    },
    lookDetail(e) {
      this.detailLs = {}
      console.log(e.cardType);
      this.dialogVisible = true;
      this.loading2 = true;
      const params = {
        customerId: e.customerId,
        customerCardId: e.customerCardId,
      };
      cardUseLs(params)
        .then((res) => {
          console.log(res);
          res.result.forEach((item) => {
            if (item.type == 5 || item.type == 9 || item.type == 11 || item.type == 11) {
              item.symbol = "-";
            }
            else if(item.type==''){
              item.symbol = "-";
            }
            else {
              item.symbol = "+";
            }
          });
          this.detailLs = res.result
          this.loading2 = false;
        })
        .finally(() => {
          this.loading2 = false;
        });
    },
    search() {
      //搜索
      console.log(this.formInline);
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      this.formInline = {};
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    getList() {
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      this.loading = true;
      cardList4Customer(params)
        .then((res) => {
          const { total, records } = res.result;
          records.forEach((item) => {
            if (item.buyCardResource == 1) {
              item.buyCardResource = "付款码";
            } else if (item.buyCardResource == 2) {
              item.buyCardResource = "小程序";
            } else {
              item.buyCardResource = "-";
            }
          });
          this.tableData =records;
          console.log(records);
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-card-title {
  font-size: 20px;
}
.head {
  //   box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  //   box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
.dia_box {
  width: 100%;
}
.dia_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.dia_detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 24px;
}
.sumit_button {
  color: #fff !important;
  background: #ff7b35 !important;
  border: 0;
}
.slot_box {
  display: flex;
  align-items: center;
}
.avatar_img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-right: 10px;
}
.sumit_button {
  color: #fff !important;
  background: #ff7b35 !important;
  border: 0;
}
</style>
